

<template>
  <main class="mine-main">
      <bg></bg>
      <order-form></order-form>
      <space></space>
      <section class="mine-main-wait">
          <section class="mine-main-wait-money same">
              <img class="same-icon" src="./order.png" alt="">
              <h4 class="same-one">待付款</h4>
          </section>
          <section class="mine-main-wait-send same">
              <img class="same-icon" src="./fahuo.png" alt="">
              <h4 class="same-one">待发货</h4>
          </section>
          <section class="mine-main-wait-take same">
              <img class="same-icon" src="./wuliu.png" alt="">
              <h4 class="same-one">待收货</h4>
          </section>
          <section class="mine-main-wait-evaluate same">
              <img class="same-icon" src="./pingjia.png" alt="">
              <h4 class="same-one">待评价</h4>
          </section>
      </section>
      <bar/>
      <main-item title="收货地址">
          <span class="adress" slot="left"><i class="fa fa-map-marker"></i></span>
          <section class="mine-main-shopping-right" slot="right">
              <span>更改详细地址</span><i class="fa fa-chevron-right"></i>
          </section>
      </main-item>
      <main-item title="我的收藏">
          <span class="collect" slot="left"><i class="fa fa-star-o"></i></span>
          <section class="mine-main-shopping-right" slot="right">
              <span>查看全部收藏</span><i class="fa fa-chevron-right"></i>
          </section>
      </main-item>
      <main-item title="我的优惠券">
          <span class="discount" slot="left"><i class="fa fa-tag"></i></span>
          <section class="mine-main-shopping-right" slot="right">
              <span>查看全部优惠券</span><i class="fa fa-chevron-right"></i>
          </section>
      </main-item>
      <main-item title="在线客服">
          <span class="service" slot="left"><i class="fa fa-user-circle-o"></i></span>
          <section class="mine-main-shopping-right" slot="right">
              <span>智能自助服务</span><i class="fa fa-chevron-right"></i>
          </section>
      </main-item>
      
  </main>
</template>
<script>
import bg from "./bg/bg";
import orderForm from "./orderForm/orderForm";
import space from "./space/space";
import bar from "../../../components/bar/bar";
import mainItem from "./mainItem/mainItem";
export default {
//   props:['']
components:{
    bg,
    orderForm,
    space,
    bar,
    mainItem,
}
}
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.mine-main{
    width: 100%;
    border-top: 1px solid #dddddf;
    &-wait{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: px2rem(130);
        align-items: center;
       
        .same{
            display: flex;
            flex-direction: column;
            text-align: center;
            &-one{
                font-size: px2rem(26);
                color: #636772;
                margin-top: px2rem(10);
            }
            &-icon{
                width: px2rem(44);
                height: px2rem(36);
                margin-left: px2rem(10);
            }
        }
    }
    .adress{
        i{
            margin-right: px2rem(18);
            font-size: px2rem(34);
            color: #9ed592;
        }
    }
    .collect{
        i{
            margin-right: px2rem(12);
            font-size: px2rem(34);
            color: #f89a67;
        }
    }
    .discount{
        i{
            margin-right: px2rem(18);
            font-size: px2rem(34);
            color: #adc112;
        }
    }
    .service{
        i{
            margin-right: px2rem(18);
            font-size: px2rem(34);
            color: #65a4d9;
        }
    }
    &-shopping{
        &-right{
            span{
                font-size: px2rem(22);
                color: #c1c1c1;
            }
            i{
                margin-left: px2rem(32);
                font-size: px2rem(26);
                color: #c1c1c1;
            }
        }
    }
}
</style>
